<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            width: 600px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <h2 class="t"></h2>
    <button class="btn">抢购</button>
    <script>
        // 1.倒计时 10秒 到0终止

        // let t = 10;
        // let timer1 = setInterval(function () {
        //     console.log(t)
        //     t--;
        //     if (t <= 0) {
        //         clearInterval(timer1)
        //     }
        // }, 1000)


        // 2.在页面中动态展示当前时间

        setInterval(function() {
            let nowTime = new Date();
            let YY = nowTime.getFullYear();
            let MM = nowTime.getMonth() + 1;
            let DD = nowTime.getDate();
            let HH = nowTime.getHours();
            let mm = nowTime.getMinutes();
            let ss = nowTime.getSeconds();
            const time = document.querySelector(".t")
            time.innerHTML = `现在时间为：${YY}年${MM}月${DD}日 ${HH}:${mm}:${ss}`
        }, 1000)

        // 3.倒计时抢购模拟

        const i = document.querySelector(".btn")
        
        function btn(YY, MM, DD, HH, mm, ss) {
            setInterval(function() {
                let nowTime = new Date();
                let targetTime = new Date(YY, MM - 1, DD, HH, mm, ss)

                let h = Math.floor((targetTime - nowTime) / (1000 * 60 * 60))
                let m = Math.floor((targetTime - nowTime) / (1000 * 60) - h * 60)
                let s = Math.floor((targetTime - nowTime) / (1000) - h * 60 * 60 - m * 60)

                i.onclick = function() {
                    if (nowTime < targetTime) {
                        return alert(`时间还没到，${h}:${m}:${s}后开始`)
                    }
                    else if (nowTime >= targetTime) {
                        return alert("时间到了")
                    }   
                }
            }, 100)
        }
        btn(2025, 7, 11, 16, 4, 0)

    </script>
</body>
</html>